// 将此文件内容复制到App.js，运行npm start即可查看效果。
import React, { useCallback } from 'react';
import {
  ReactFlow,
  useNodesState,
  useEdgesState,
  addEdge,
  Handle,
} from 'reactflow';
import 'reactflow/dist/style.css';

const CustomNode = ({ data }) => {
  return (
    <div style={{
      padding: 20,
      border: '1px solid #ddd',
      borderRadius: 5,
      background: '#fff',
    }}>
      <div>{data.label}</div>
      {/* 左侧两个输入句柄 */}
      <Handle
        type="target"
        position="left"
        id="input-1"
        style={{ top: '30%' }}
      />
      <Handle
        type="target"
        position="left"
        id="input-2"
        style={{ top: '70%' }}
      />
      {/* 右侧两个输出句柄 */}
      <Handle
        type="source"
        position="right"
        id="output-1"
        style={{ top: '30%' }}
      />
      <Handle
        type="source"
        position="right"
        id="output-2"
        style={{ top: '70%' }}
      />
    </div>
  );
};

const initialNodes = [
  { 
    id: '1', 
    position: { x: 0, y: 0 }, 
    data: { label: '1' },
    type: 'custom',
  },
  { 
    id: '2', 
    position: { x: 200, y: 100 }, 
    data: { label: '2' },
    type: 'custom',
  },
];

const initialEdges = [
  { 
    id: 'e1-2a', 
    source: '1', 
    sourceHandle: 'output-1',
    target: '2', 
    targetHandle: 'input-2',
  },
  { 
    id: 'e1-2b', 
    source: '1', 
    sourceHandle: 'output-2',
    target: '2', 
    targetHandle: 'input-1',
  }
];

const nodeTypes = {
  custom: CustomNode,
};

export default function App() {
  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);

  const onConnect = useCallback(
    (params) => setEdges((eds) => addEdge({
      ...params,
      type: 'default',
    }, eds)),
    [setEdges]
  );

  return (
    <div style={{ height: '500px' }}>
      <ReactFlow
        nodes={nodes}
        edges={edges}
        onNodesChange={onNodesChange}
        onEdgesChange={onEdgesChange}
        onConnect={onConnect}
        nodeTypes={nodeTypes}
        fitView
      />
    </div>
  );
}